<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h1>{{message}}</h1>
  <c :categorys="category" @item-click="cpnClick"></c>
</div>

<template id="cpn">
  <div>
    <button v-for="item in categorys" @click="butClick(item)">{{item.name}}</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  Vue.component('c',{
    template:`#cpn`,
    props: {
      categorys: {
        type: Array,
      }
    },
    methods: {
      butClick(item) {
        return this.$emit('item-click',item);
      }
    }
  })

  //let(变量)和const(常量)
  const app = new Vue({
    el: '#app',
    data: {
      message: '中国牛蛙！',
      category: [
        {
          id: 'action',
          name: '动作',
        },
        {
          id: 'comedy',
          name: '喜剧'
        },
        {
          id: 'science',
          name: '科幻'
        },
        {
          id: 'love',
          name: '爱情'
        }
      ]
    },
    methods: {
      cpnClick(item) {
        console.log('cpn--Click',item);
      }
    }
  })
</script>
</body>
</html>